<template>
  <div class="login_div">
    <div class="form">
      <el-form
          :label-position="labelPosition"
          label-width="100px"
          :model="formLabelAlign"
          style="max-width: 90%;height:90%;margin-top: 5%"
      >
        <el-form-item :label="labelName">
          <el-input v-model="formLabelAlign.name" />
        </el-form-item>
        <el-form-item label="password">
          <el-input v-model="formLabelAlign.pwd" type="password" show-password/>
        </el-form-item>
        <el-row justify="space-evenly" style="top: 5%">
          <el-button size="large" style="width: 120px" @click="login">登录</el-button>
          <el-button size="large" style="width: 120px" @click="clear('Home')">取消</el-button>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import {Login} from "@/api";
import {ElMessage} from "element-plus";
import router from "@/router";
import {UserLoginStore} from "@/stores/counter";
import {UserInfoStore} from "../../stores/csms";

const labelPosition = ref('top')
const formLabelAlign = reactive({name: '', pwd: '',})
const labelName = ref('Name')
const store = UserLoginStore()

function login () {
  let username = formLabelAlign.name
  let password = formLabelAlign.pwd
  let user = {username, password}
  Login(user).then((res) =>{
    console.log(res)
    const token = res.data.data
    const message = res.data.message
    if (message === '登录成功') {
      ElMessage({message: message, type: 'success',showClose: true,})
      sessionStorage.setItem('username', username)  // 将用户名存入session中，以便判断用户是否登录
    }
    else {
      ElMessage({message: message, type: 'error',showClose: true,})
    }
    // 在浏览器中存入token信息
    localStorage.setItem('token', token)
    // 修改登录状态
    store.loginStatus = true
    console.log(store.loginStatus)
    router.replace({name: 'Home'})
  })
}

function clear(msg) {
  router.replace({name: msg})
}
</script>

<style scoped>
.form{
  width: 500px;
  height: 300px;
  padding-left: 3%;
  margin-left: 32%;
  margin-top: 10%;
  border: 1px solid #c9c4c4;
  border-radius: 40px;
  box-shadow: 4px 4px 4px #e0dbdb;
}
</style>
